// 
$(function () {
  // 1. 获取广告位数据-渲染
  const layer = layui.layer
  const form = layui.form
  const laypage = layui.laypage;

  // 定义分页参数
  let q = {
    advposdesc: '',  //广告位描述
    advposname: '',  //广告位名称
    page: 1,  //页码
    limit: 10, //每页数量
  }

  let q2 = {
    advimgdesc: '',
    advimgpos: '',
    advimglink: '',

    page: 1, // 请求的页码
    limit: 10, // 每页请求数据条数
  }

  let layerIndex = null
  let imgSrc = null


  // 1.头部框下拉列表
  adverlist()
  function adverlist() {
    $.ajax({
      method: 'GET',
      url: '/ydd_advpos/list',
      // // headers在baseApi里配置
      // headers: {
      //   "x-token": localStorage.getItem("x-token")
      // },
      data: q,
      success: function (res) {
        if (res.errno !== 0) return layer.msg('获取列表失败')
        // 成功，渲染数据
        const htmlList = res.data.data.map(function (item) {
          return `
             <option value="${item.advposname}">${item.advposname}</option>
    `
        }).join('')

        $('#select').append(htmlList)
        form.render('select')
      }
    })
  }

  // 2.渲染表格
  adverPiclist()
  function adverPiclist() {
    $.ajax({
      method: 'GET',
      url: '/ydd_advimg/list',
      // headers在baseApi里配置
      // headers: {
      //   "x-token": localStorage.getItem("x-token")
      // },
      data: q2,
      success: function (res) {
        // console.log(res.data)
        console.log(res.data.data)

        const trStr = res.data.data.map((item, index) => {
          return `
          <tr>
          <td>${item.id}</td>
          <td>${item.advposname}</td>
          <td>${item.advimgdesc}</td>
          <td><img src=	${'http://124.223.14.236:8060/' + item.advimgsrc} alt=""></td>
          <td>${item.advimglink}</td>
          <td>
          <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="xiugai" data-id="${item.id}">
            <i class="layui-icon">&#xe642;</i>
          </button>
          <button type="button" class="layui-btn  layui-btn-danger layui-btn-sm" id="shangchu" data-id="${item.id}">
            <i class="layui-icon">&#xe640;</i>
          </button>
        </td>
        </tr>
          `
        }).join('')
        $('.adp').html(trStr)

        //  调用分页方法
        renderPage(res.data.count)
      }
    })
  }

  // 5.分页
  function renderPage(total) {
    //执行一个laypage实例
    laypage.render({
      elem: 'page-box', //注意，这里的 test1 是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      curr: q2.page,     //当前的页码
      limit: q2.limit,    //每页 显示的条数
      limits: [3, 5, 10, 20],  // 每页条数的选择项
      layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'], // 看文档资料
      // 当分页被切换时触发
      jump: function (obj, first) {
        // //obj包含了当前分页的所有参数，比如：
        console.log(obj.curr);  //得到当前页，以便向服务端请求对应页的数据。
        console.log(obj.limit); //得到每页显示的条数

        // 触发分页回调，修改查询条件
        q2.page = obj.curr
        q2.limit = obj.limit

        //首次不执行
        if (!first) {
          adverPiclist()
        }
      }

    });
  }

  // 3. 新增
  // 3.1 新增的点击效果
  $('.add').on('click', function () {
    layerIndex = layer.open({
      type: 1,
      title: '添加广告图',
      area: ['860px', '500px'],
      content: $('#tplAddCate').html()
    });

    // 弹出层里的下拉框                                    
    $.ajax({
      method: 'GET',
      url: '/ydd_advpos/list',
      data: q,
      success: function (res) {
        console.log(res.data.data)

        // 成功，渲染数据
        const htmlList2 = res.data.data.map(function (item) {
          return `
             <option value="${item.advposname}">${item.advposname}</option>
    `}).join('')
        $('#select3').append(htmlList2)
        // form.render()
        form.render('select', 'addCateForm');
      }
    })
    form.render()
  })


  // 3.2 新增弹出框里的下拉框渲染
  // $('body').on('click', '#select2', function (e) {
  //   console.log(333);
  //   // $.ajax({
  //   //   method: 'GET',
  //   //   url: '/ydd_advpos/list',
  //   //   data: q,
  //   //   success: function (res) {
  //   //     console.log(res.data.data)

  //   //     // 成功，渲染数据
  //   //     const htmlList2 = res.data.data.map(function (item) {
  //   //       return `
  //   //          <option value="">${item.advposname}</option>
  //   // `}).join('')
  //   //     $('#select3').append(htmlList2)
  //   //     // form.render()
  //   //     form.render('select', 'addCateForm');
  //   //   }
  //   // })

  // })

  // 3.3 图片上传 按钮的模拟点击
  $('body').on('click', '#addBtn', function () {
    $('#file').click()
  })

  // 3.3.2  上传图片的change事件
  $('body').on('change', '#file', function (file) {
    // 获得图片的本地路径
    const fileList = file.target.files
    // console.log(fileList);
    const imgUrl = URL.createObjectURL(fileList[0])
    // console.log(imgUrl);
    // 修改图片盒子的背景图片
    document.getElementById('show').style.backgroundImage = `url(${imgUrl})`;

    // const fd = new FormData($('#addAdv')[0])
    // console.log(fd,111)
    // 发送请求得到图片的后台路径
    // 图片上传
    let fd = new FormData(document.querySelector('#addAdv'))
    $.ajax({
      url: "/common/upload?type=images",
      method: 'POST',
      data: fd,
      // 注意：formData格式的请求要加上下面两项配置
      contentType: false,
      processData: false,
      success: function (res) {
        console.log(res, "rees")
        // 修改图片的上传路径
        imgSrc = res.data.savePath
      }
    })

  })


  // 3.3 新增的提交事件
  $('body').on('submit', '#addAdv', function (e) {
    console.log(55);
    e.preventDefault()

    const advposname = $('#addCateForm #select3').val()
    const advimgdesc = $('#addCateForm [name=advimgdesc]').val()
    const advimglink = $('#addCateForm [name=advimglink]').val()
    const advimgpos = ''
    const advimgsrc = imgSrc
    console.log(advposname, advimgdesc, advimglink, advimgsrc)

    // 提交
    $.ajax({
      url: '/ydd_advimg/add',
      method: 'POST',
      // headers: {
      //   'x-token': localStorage.getItem('x-token')
      // },
      data: {
        advimgpos,
        advimgdesc,
        advimglink,
        advimgsrc,
        advposname,
      },

      success: function (res) {
        if (res.errno) {
          return layer.msg("数据添加失败!")
        }
        layer.msg("数据添加成功!")
        layer.close(layerIndex)
        adverPiclist()
      }
    })

  })




  // let imgSrc = null
  // // 点击上传图片,监听文件上传的change事件
  // $('body').on('change', '#file', function (file) {
  //   // 获得图片的本地路径
  //   const fileList = file.target.files
  //   // console.log(fileList);
  //   const imgUrl = URL.createObjectURL(fileList[0])
  //   // console.log(imgUrl);
  //   // 修改图片盒子的背景图片
  //   document.getElementById('show').style.backgroundImage = `url(${imgUrl})`;

  //   const fd = new FormData($('#addAdv')[0])
  //   // console.log(fd,111)
  //   // 发送请求得到图片的后台路径
  //   $.ajax({
  //     url: 'http://124.223.14.236:8060/admin/common/upload?type=images',
  //     method: 'POST',
  //     data: fd,
  //     headers: {
  //       'x-token': localStorage.getItem('x-token')
  //     },
  //     // 注意：formData格式的请求要加上下面两项配置
  //     contentType: false,
  //     processData: false,
  //     success: function (res) {
  //       // console.log(res, "rees")
  //       // 修改图片的上传路径
  //       imgSrc = res.data.savePath
  //     }
  //   })

  // })





  // // 新增的点击效果
  // // $('#addCate').on('click', function () {
  // //   layerIndex = layer.open({
  // //     type: 1,
  // //     title: '添加广告图',
  // //     area: ['860px', '500px'],
  // //     content: $('#tplAddCate').html()
  // //   });
  // // })

  // // 新增的提交事件
  // $('body').on('click', '#setAdv', function (e) {
  //   e.preventDefault()
  //   const advimgpos = $('#addCateForm [name=advimgpos]').val()
  //   const advimglink = $('#addCateForm [name=advimglink]').val()
  //   const advimgdesc = $('#addCateForm [name=advimgdesc]').val()
  //   const advimgsrc = imgSrc
  //   console.log(advimgpos, advimglink, advimgdesc, advimgsrc)

  //   $.ajax({
  //     url: 'http://124.223.14.236:8060/admin/ydd_advimg/add',
  //     method: 'POST',
  //     headers: {
  //       'x-token': localStorage.getItem('x-token')
  //     },
  //     data: {
  //       advimgpos,
  //       advimglink,
  //       advimgsrc,
  //       advimgdesc,
  //     },

  //     success: function (res) {
  //       console.log(res, 6666666666)
  //       if (res.errno) {
  //         return layer.msg("数据添加失败!")
  //       }
  //       layer.msg("数据添加成功!")
  //       layer.close(layerIndex)
  //       adverPiclist()
  //     }
  //   })
  // })



  // // 申明一个变量，接收点击之后的图片地址
  // let newSrc = null


  // // 修改按钮的点击事件
  // $('tbody').on('click', '#xiugai', function () {
  //   const id = $(this).attr('data-id')
  //   layerIndex = layer.open({
  //     type: 1,
  //     title: '修改广告图',
  //     area: ['860px', '500px'],
  //     content: $('#tplEditCate').html()
  //   });
  //   // 根据文章类别Id请求当前类别数据并快速赋值给form表单
  //   $.ajax({
  //     url: 'http://124.223.14.236:8060/admin/ydd_advimg/rowInfo',
  //     method: 'get',
  //     data: { id },
  //     headers: {
  //       'x-token': localStorage.getItem('x-token')
  //     },
  //     success: function (res) {
  //       // console.log(res)
  //       // $('.layui-form [name=catename]').val(res.data.catename)
  //       // $('.layui-form [name=icon]').val(res.data.icon)
  //       // $('.layui-form [name=sort_num]').val(res.data.sort_num)
  //       if (res.errno) {
  //         return layer.msg('获取数据失败')
  //       }
  //       // 快速给form表单赋值
  //       // console.log(res.data.advimgsrc)
  //       newSrc = res.data.advimgsrc


  //       $('#editCateForm [name=id]').val(res.data.id)
  //       $('#editCateForm [name=advimglink]').val(res.data.advimglink)
  //       $('#editCateForm [name=advimgdesc]').val(res.data.advimgdesc)
  //       $('#editCateForm [name=advimgpos]').val(res.data.advimgpos)
  //       document.getElementById('showEdit').style.backgroundImage = `url(${'http://124.223.14.236:8060/' + res.data.advimgsrc})`;
  //     }
  //   })
  // })



  // // 处理修改的图片路径
  // $('body').on('change', '#fileEdit', function (file) {
  //   // 获得图片的本地路径
  //   const fileList = file.target.files
  //   // console.log(fileList);
  //   const imgUrl = URL.createObjectURL(fileList[0])
  //   // console.log(imgUrl);
  //   // 修改图片盒子的背景图片
  //   document.getElementById('showEdit').style.backgroundImage = `url(${imgUrl})`;

  //   const fd = new FormData($('#editAdvForm')[0])
  //   // console.log(fd,111)
  //   // 发送请求得到图片的后台路径
  //   $.ajax({
  //     url: 'http://124.223.14.236:8060/admin/common/upload?type=images',
  //     method: 'POST',
  //     data: fd,
  //     headers: {
  //       'x-token': localStorage.getItem('x-token')
  //     },
  //     // 注意：formData格式的请求要加上下面两项配置
  //     contentType: false,
  //     processData: false,
  //     success: function (res) {
  //       // console.log(res, "rees")
  //       // 修改图片的上传路径
  //       imgSrc = res.data.savePath
  //     }
  //   })
  // })
})